<script>
import { defineComponent, onMounted, computed, ref, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { useColumnsStore } from '@/store/column';
import Footer from '../components/footer.vue';
import ParentHeader from '../components/parentHeader.vue';
import { getColumnDetailService, getArticleListService } from '@/api/user.js';

export default defineComponent({
    name: 'ColumnVue',
    components: {
        Footer,
        ParentHeader,
    },
    setup() {
        const columnsStore = useColumnsStore();
        const route = useRoute();
        const router = useRouter();
        const columnDetail = ref(null);
        const articles = ref([]);

        // 计算属性用于判断当前栏目是否为特定类型
        const isOverviewColumn = computed(() => columnDetail.value?.name === '馆院概况');
        const isNewsColumn = computed(() => columnDetail.value?.name === '馆院简讯');

        // 获取栏目详情数据
        const fetchColumnDetail = async (id) => {
            try {
                const response = await getColumnDetailService(id);
                columnDetail.value = response.data;

                // 如果是"馆院简讯"则直接跳转到 NewsColumnDetail 组件
                if (columnDetail.value?.name === '馆院简讯') {
                    router.push({
                        name: 'NewsColumnDetail',
                        params: { id: columnDetail.value.columnId }
                    });
                }
            } catch (error) {
                console.error("Failed to fetch column detail:", error);
            }
        };

        // 异步选择子栏目
        const selectChildColumn = async (columnId) => {
            columnsStore.selectColumn(columnId);
            try {
                const params = {
                    subColumnId: columnId,
                    state: '已发布'
                };
                const result = await getArticleListService(params);
                if (result.code === 200) {
                    articles.value = result.data || []; // 确保从API响应中提取正确的文章列表
                } else {
                    console.error("获取文章列表失败:", result.msg);
                }
            } catch (error) {
                console.error("获取文章列表失败:", error);
            }
        };

        // 跳转到详情页面
        const gotoDetail = (columnId) => {
            // router.push({ name: 'ColumnDetail', params: { id: columnId } });
            router.push({ name: 'AllArticles', params: { id: columnId } });
        };

        // 跳转到文章详情页
        const goToArticleDetail = (articleId) => {
            router.push({ name: 'ArticleDetail', params: { id: articleId } });
        };

        // 当选中的栏目ID变化时，获取对应的栏目和子栏目信息
        watch(() => route.params.id, async (newId) => {
            if (newId) {
                await Promise.all([fetchColumnDetail(newId), columnsStore.fetchChildrenColumns(newId)]);
                if (columnsStore.childrenColumns.length > 0) {
                    await selectChildColumn(columnsStore.childrenColumns[0].columnId);
                }
            }
        }, { immediate: true });

        // 组件挂载时确保有父级栏目数据
        onMounted(() => {
            if (columnsStore.parentColumns.length === 0) {
                columnsStore.fetchParentColumns();
            }
        });

        return {
            columnDetail,
            childrenColumns: computed(() => columnsStore.childrenColumns),
            isOverviewColumn,
            isNewsColumn,
            selectedChildId: computed(() => columnsStore.selectedColumnId),
            selectChildColumn,
            gotoDetail,
            articles,
            goToArticleDetail
        };
    }
});
</script>


<template>
    <body>
        <ParentHeader></ParentHeader>
        <div class="column-content">
            <!-- 动态显示不同栏目类型的内容 -->
            <template v-if="columnDetail">
                <!-- 馆院概况 -->
                <div v-if="isOverviewColumn" class="column-content01">
                    <div v-for="(child, index) in childrenColumns" :key="index" class="introduce-item">
                        <div class="introduce-title">{{ child.name }}</div>
                        <div class="introduce-content">{{ child.description }}</div>
                        <div @click="gotoDetail(child.columnId)" class="introduce-footer">更多 ></div>
                    </div>
                </div>

                <!-- 馆院简讯 -->
                <div v-else-if="isNewsColumn">

                </div>

                <!-- 剩余专栏 -->
                <div v-else class="column-content02" style="margin-left: 130px;">
                    <div class="tab-box">
                        <div v-for="(child, index) in childrenColumns" 
                             :key="index"
                             @click="selectChildColumn(child.columnId)"
                             :class="['tab-item', { 'active': child.columnId === selectedChildId }]">
                            {{ child.name }}
                        </div>
                        <a class="more">MORE</a>
                    </div>

                    <!-- 文章列表 -->
                    <div class="article-list">
                        <div v-for="(article, index) in articles" 
                             :key="index" 
                             class="article-item"
                             @click="goToArticleDetail(article.articleId)">
                            <div class="article-content">
                                <img :src="article.coverImageUrl" 
                                     :alt="article.title" 
                                     class="article-image">
                                <div class="article-details">
                                    <h3>{{ article.title }}</h3>
                                    <p>{{ article.resume }}</p>
                                    <span>来源：{{ article.source }} &nbsp;&nbsp;|&nbsp;&nbsp; 时间：{{ article.updatedTime }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <br><br>

            </template>
        </div>
        <Footer></Footer>
    </body>
</template>


<style lang="scss">
@import '../assets/css/columns/iconfont.css';
@import '../assets/css/columns/column-content.css';
@import '../assets/css/columns/column-content01.css';
@import '../assets/css/columns/column-header.css';
@import '../assets/css/columns/reset.css';

// 确保样式作用域正确，避免全局污染
body {
    min-width: 75%;
    width: 100%;
}

.selected {
    background-color: #792323;
}

.activity-video-section {
    display: flex;
    flex-direction: column;
    gap: 20px; // 添加间距
    width: 100%; // 确保占据整个父容器的宽度
}

.content-video {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px; // 可选：添加内边距
}

.tab-box {
    flex-grow: 1;
}

.article-list {
    display: flex;
    flex-wrap: wrap; // 允许换行
    gap: 20px; // 设置项目之间的间距
    margin-left: 20px;
}

.article-item {
    width: 100%;
    padding: 30px 0;
    border-bottom: 1px solid #eee;
    transition: all 0.3s ease;
    cursor: pointer;

    &:hover {
        background-color: #f9f9f9;
    }
}

.article-content {
    display: flex;
    align-items: flex-start;
    padding: 0 30px;
    gap: 30px;
}

.article-image {
    width: 280px;
    height: 180px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

.article-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 180px;
    
    h3 {
        font-size: 20px;
        color: #333;
        margin: 0 0 15px 0;
        font-weight: bold;
        line-height: 1.4;
        
        &:hover {
            color: #792323;
        }
    }

    p {
        font-size: 14px;
        color: #666;
        line-height: 1.6;
        margin: 0;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    span {
        font-size: 12px;
        color: #999;
        margin-top: auto;
    }
}

.article-item:last-child {
    border-bottom: none;
}

.tab-box {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eee;
    margin: 0 30px;
    padding: 10px 0;

    .tab-item {
        padding: 8px 20px;
        margin-right: 20px;
        font-size: 16px;
        color: #333;
        cursor: pointer;
        position: relative;
        transition: all 0.3s ease;

        &:hover {
            color: #792323;
        }

        &.active {
            color: #792323;
            font-weight: bold;

            &:after {
                content: '';
                position: absolute;
                bottom: -2px;
                left: 0;
                width: 100%;
                height: 2px;
                background-color: #792323;
            }
        }
    }

    .more {
        margin-left: auto;
        color: #999;
        font-size: 14px;
        text-decoration: none;

        &:hover {
            color: #792323;
        }
    }
}

.column-content02 {
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    margin: 20px auto;
    width: 90%;
    max-width: 1200px;
    padding: 20px 0;
}

@media (max-width: 768px) {
    .article-item {
        flex: 1 1 100%; // 在小屏幕上占据整个宽度
        max-width: 100%;
    }

    .custom-video {
        width: 100%; // 小屏幕上占据更多空间
        max-width: none; // 移除最大宽度限制
    }
}

// 确保所有内部元素也响应式
.tab-box,
.more,
.introduce-footer {
    flex-shrink: 0; // 防止这些元素被压缩
}
</style>